<template>
  <!-- 弹框选择 -->
  <div
    :class="['button-select-pop', 'button-select-pop_disabled_' + disabled]"
    @click.stop="itemEvent"
  >
    <div v-tooltip-auto-show>
      <el-tooltip :content="row[prop]" placement="top">
        <p class="onelineOverflow">{{ row[prop] || '' }}</p>
      </el-tooltip>
    </div>

    <img src="@/assets/image/left.png" />
  </div>
</template>
<script setup>
import _ from 'lodash';
const props = defineProps({
  prop: {
    type: String,
    default: '',
  },
  scope: {
    type: Object,
    default: () => {
      return {};
    },
  },
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
});

const attrs = useAttrs();

const emits = defineEmits(['itemEvent']);

// 是否禁用
const disabled = computed(() => {
  return attrs.disabledFn && _.isFunction(attrs.disabledFn)
    ? attrs.disabledFn(row)
    : attrs.disabled || false;
});

function itemEvent() {
  if (disabled.value) return;
  emits('itemEvent', { prop: props.prop, scope: props.scope, row: props.row });
}
</script>
<style lang="scss" scoped>
.button-select-pop {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  width: 100%;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;

  > div {
    display: block;
    flex: 1;
    margin-right: 10px;
    padding-left: 10px;
    overflow: hidden;
  }
  .onelineOverflow {
    text-align: left;
  }
  img {
    width: 20px;
    height: auto;
  }
}
.button-select-pop_disabled_true {
  cursor: not-allowed;
  background-color: var(--el-fill-color-light);
}
</style>
